﻿
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="time"], input[type="url"], input[type="tel"], textarea, select {
    @include border-radius(2px);
    font-family:$fontstack-default;
    font-size:1em;
    border:1px solid #d2d2d2;
    padding:10px;
    width: 100%;

    &.ng-invalid {
        //box-shadow: 0px 0px 3px $color-warning!important;
        //border-color:$color-warning;
    }
}

input[type="color"] {
    @include border-radius(2px);
    font-family:$fontstack-default;
    border:1px solid #d2d2d2;
    width:40px;
    height:40px;
}

.checkbox-display-value, .text-block-display-value, .text-area-display-value {
    padding: 1rem;
    background: #fafafa;

    ul {
        list-style-type: disc;
        margin-left: 1em;
    }

    li {
        display: list-item;
        margin-left: 1em;
    }
}

.text-area-display-value {
    white-space: pre-line;
}

.text-block-display-value {
    padding: 1rem;
    background: #fafafa;
    /* 
        The css reset is really problematic here, we unfortunately need to 
        re-enable basic styling to get proper display from html editor and
        other rich text output.
    */
    h1, h2, h3, h4, h5, h6 {
        font-weight: $fontweight-bold;
        margin: 0.8em 0;
        padding: 0;
    }

    h1 {
        font-size: 2.2em;
    }

    h2 {
        font-size: 2.0em;
    }

    h3 {
        font-size: 1.8em;
    }

    h4 {
        font-size: 1.6em;
    }

    h5 {
        font-size: 1.4em;
    }

    p {
        margin: 0.8em 0;
    }

    b, strong {
        font-weight: $fontweight-bold;
    }

    i, cite, em {
        font-style: italic;
    }

    ul, ol {
        margin: 0.8em 0;
    }

    ol {
        list-style-type: decimal
    }

    ol ul, ul ol,
    ul ul, ol ol {
        margin-top: 0;
        margin-bottom: 0
    }

    pre {
        white-space: pre;
        margin: 0.8em 0;
    }

    code {
        font-family: monospace;
    }

    sup {
        vertical-align: super;
        font-size: smaller;
    }

    sub {
        vertical-align: sub;
        font-size: smaller;
    }
}

.color-box {
    @include border-radius(3px);
    width: 40px;
    height: 40px;
    display: block;
    text-align: center;
    padding-top: 13px;
    text-indent:50px;

    &.edit {
        position: absolute;
        top: 0;
        z-index: -1;
    }
}

.filtered-dd {
    .btn-icon .fa {
        padding:9px;
    }

    .btn-remove {
        position: absolute;
        right: 25px;
        top: 0px;
        z-index:2;
    }

    .btn-add {
        position: absolute;
        right: 50px;
        top: 0px;
        z-index:2;
    }
}

.form-validation-summary li {
    padding:5px;
    margin-top: -1px;
    border-left: 1px solid #d2d2d2;
    border-right: 1px solid #d2d2d2;
    border-bottom: 1px solid #d2d2d2;
    border-top: 1px dashed white;
    z-index: 10;
    position: relative;
}

.selectize-input, .selectize-control.single .selectize-input {
    @include box-shadow(none);
}

.selectize-dropdown {
    position:relative!important;
    top:auto!important;
}

.selectize-control {
    width:100%!important;
}
.selectize-control.single .selectize-input {
    background:none;
}
.ui-select-container[theme="selectize"].direction-up .ui-select-dropdown {
    box-shadow:none;
    margin-top:-4px;
}
.selectize-dropdown .active {
    background:$color-selected;
    color:#000;
}
.selectize-control.single .selectize-input, .selectize-dropdown.single {
    border-color: #d2d2d2;
}
.selectize-control.single .selectize-input {

    &:after {
        @include transition(color .3s);
        font-family: FontAwesome;
        content: "\f0d7";
        font-size: 1.3em;
        border: none;
        top: 11px;
        right: 23px;
    }

    &:hover:after {
        color: $color-primary;
    }
}

.filtered-dd--actions {
    text-align:right;
}

.form-field-text-area {
    z-index: 10000 !important;

    .mce-fullscreen {
        top: 70px;
        bottom: 0;
        left: 228px;
        width: auto;
        right: 0;

        @at-root .modal #{&} {
            top: 0;
            left: 0;
        }
    }

    @media screen and (min-width: 950px) {
        .mce-fullscreen {
            left: 288px;
        }
    }
}

// aria-label seems to be the only hook available for the code editor :(
.mce-container[aria-label="Source code"] textarea {
    font-family: monospace;
}

/* Actions that nest below an input field (used in YouTube and vimeo plugins */
.form-field-input-actions {
    margin-top: 10px;
    text-align: right;
}